<script setup lang="ts">
  import { ref } from "vue";

  const userName = ref("");
  const passWord = ref("");
</script>

<template>
  <main>
    <div class="position-absolute top-50 start-50 translate-middle">
      <section>
        <form>
          <div class="d-inline-block db-input">
            <input type="text"
                   v-model.lazy.trim="userName" />
          </div>
          <input type="password"
                 v-model.lazy="passWord" />
          <br />
          {{ userName }}
          <br /> 
          {{ passWord }}
        </form>
      </section>
    </div>
  </main>
</template>

<style lang="scss" scoped>
  main {
    width: 100vw;
    height: 100vh;

    background-color: #f5f5f5;
  }

  .db-input {
    > input {
      width: 100%;
      height: 100%;
    }
  }
</style>

<style lang="scss">
  main {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
  }

  .db-input {
    > input {
      width: 100%;
      height: 100%;
    }
  }
</style>
